import { FC, memo } from 'react'
import { LtModelWrapper } from './style'
import { CSSTransition } from 'react-transition-group'

interface IState {
  children?: React.ReactNode
  isModel: boolean
  onClose: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
}

const LtModel: FC<IState> = memo((props) => {
  const { children, isModel, onClose } = props

  return (
    <LtModelWrapper>
      <CSSTransition in={isModel} classNames="mode" timeout={100} unmountOnExit>
        <div className="mode_content">
          <div className="mask" onClick={(e) => onClose(e)}></div>
          {children}
        </div>
      </CSSTransition>
    </LtModelWrapper>
  )
})

export default LtModel
